<template>
  <!--新增/编辑-->
  <el-dialog
    :close-on-click-modal="false"
    title="新增试样"
    :beforeClose="handleClose2"
    :visible.sync="dialogVisible2"
    width="500px">
    <el-form :model="form" size="mini" label-width="120px" :rules="rules" ref="form">
      <el-form-item label="客户名称：" v-if="popType == 'hasCustomerId'">
        {{form.customerName}}
      </el-form-item>
      <el-form-item label="客户名称：" v-else prop="customerId">
        <el-select
          clearable
          v-model="form.customerId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod1"
          :loading="customerLoading">
          <el-option
            v-for="item in customerList"
            :key="item.customerId"
            :label="item.customerName"
            :value="item.customerId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品线：" prop="goodsLineId">
        <el-select v-model="form.goodsLineId"  @change="changeGoodsId">
          <el-option :label="item.cddValue" v-for="item in goodsLineList" :value="item.cddId" :key="item.cddId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试料牌号：" prop="goodsKingId">
          <el-select v-model="form.goodsKingId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in goodsList"
              :key="item.kingId"
              :label="item.goodsSn"
              :value="item.kingId">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="数量：" prop="goodsNum">
          <el-input style="width:100px" v-model="form.goodsNum"></el-input> <span style="padding-left:5px;">吨</span>
      </el-form-item>
      <el-form-item label="收货人：" prop="receiverName">
        <el-input style="width:150px" v-model="form.receiverName"></el-input>
      </el-form-item>
      <el-form-item label="收货人电话：" prop="receiverMobile">
        <el-input style="width:150px" v-model="form.receiverMobile"></el-input>
      </el-form-item>
      <el-form-item label="收货地址：" prop="addressInfo">
        <el-input type="textarea" :rows="2" placeholder="请输入收货地址" v-model="form.addressInfo"></el-input>
      </el-form-item>
      <el-form-item label="用料情况：" prop="useGoodsInfo">
        <el-input type="textarea" :rows="2" placeholder="请输入用料情况" v-model="form.useGoodsInfo"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
  </el-dialog>
</template>
<script>
import {getCustomerSetting,orderGoodsList,getCustomerOption} from '@/api/partner'
import {developAddGoodsTry} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultForm = {
  tryId:0,
  goodsLineId:'',
  goodsKingId:'',
  customerId:'',
  customerName:'',
  "goodsNum" : '', //数量
  "receiverName" : "", //收货人
  "receiverMobile" : "", //收货人手机号
  "addressInfo" : "", //收货地址
  "useGoodsInfo" : ""  //用料情况
};
export default {
  name: "index",
  data(){

    return {
      dialogVisible2:false,
      title2:'',
      btnLoading2:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        customerId:[{required: true, message: '此项必填', trigger: 'change'},],
        goodsKingId:[{required: true, message: '此项必填', trigger: 'change'},],
        goodsLineId:[{required: true, message: '此项必填', trigger: 'change'},],
        goodsNum:[{required: true, message: '此项必填', trigger: 'blur'},],
        receiverName:[{required: true, message: '此项必填', trigger: 'blur'},],
        receiverMobile:[{required: true, message: '此项必填', trigger: 'blur'},],
        addressInfo:[{required: true, message: '此项必填', trigger: 'blur'},],
        useGoodsInfo:[{required: true, message: '此项必填', trigger: 'blur'},],
      },
      goodsLineList:[],
      goodsList:[],
      customerList:[],
      customerLoading:false,
      popType:'',
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{
    //获取客户列表
    remoteMethod1(query) {
      if(query && query!= ''){
        this.customerLoading = true;
        getCustomerOption({keywords:query,tab:'my'}).then(response => {
          this.customerList = response;
          this.customerLoading = false;
        }).catch(()=>{
          this.customerLoading = false;
        });
      }
    },
    //显示
    showPop(item){
      this.dialogVisible2 = true;
      this.form = JSON.parse(JSON.stringify(defaultForm))
      if(item){
        this.popType = 'hasCustomerId';
        this.form.customerName = item.customerName;
        this.form.customerId = item.customerId;
      }else{
        this.popType = 'noCustomerId';
      }
      this.getCustomerSettingList();
      orderGoodsList().then((res)=>{
        this.goodsList = res.list
      })
    },

    changeGoodsId(){
      this.form.goodsKingId = '';
      this.goodsList = [];
      this.getGoodsList();
    },

    getGoodsList(){
      orderGoodsList({goodsLineId:this.form.goodsLineId}).then((res)=>{
        this.goodsList = res.list
      })
    },

    //关闭弹窗
    handleClose2(){
      this.$refs.form.clearValidate();
      this.dialogVisible2 = false;
      this.btnLoading2 = false;
    },

    //提交
    handleConfirm2(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          developAddGoodsTry(data).then((res)=>{
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('getList');
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })
    },


    //获取客户配置
    getCustomerSettingList(){
      getCustomerSetting().then((res)=>{
        res.forEach((el)=>{
         if(el.cdtCode == 'goods_line'){
            this.goodsLineList = el.data
          }
        });
      })
    },
  },
}
</script>

<style  lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
  vertical-align: middle;
}
</style>
